<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@page import="org.durcframework.core.UserContext"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>视频管理</title>
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/assets/css/style.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/assets/jquery-easyui-1.4.3/themes/default/easyui.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/assets/jquery-easyui-1.4.3/themes/icon.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/assets/css/easyui.icon.css" />
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/jquery-easyui-1.4.3/jquery.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/jquery.js/jquery.json.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/jquery.js/jquery.fw.ext.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/jquery.form.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/easyui.js/easyui.ext.js"></script>
		<!-- <script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/menu.js"></script> -->
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/message.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/MD5.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/moment.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/zh-cn.js"></script>
		<style type="text/css">
		.progress {
		    height: 20px;
		    margin:10px 0px 10px 0px;
		    overflow: hidden;
		    background-color: #f5f5f5;
		    border-radius: 4px;
		    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
		    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
		    display: inline - block;
		    vertical-align: baseline;
		}
		.progress-bar {
			float:left;
			width:0;
			height:100%;
			font-size:12px;
			line-height:20px;
			color:#fff;
			text-align:center;
			background-color:#337ab7;
			-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);
			box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);
			-webkit-transition:width .6s ease;
			-o-transition:width .6s ease;
			transition:width .6s ease
		}
		.progress-bar-striped,.progress-striped .progress-bar {
			background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			-webkit-background-size:40px 40px;
			background-size:40px 40px
		}
		.progress-striped .progress-bar-success {
			background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
		}
		.progress-striped .progress-bar-info {
			background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
		}
		.progress-striped .progress-bar-warning {
			background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
		}
		.progress-striped .progress-bar-danger {
			background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
		}
		
		</style>
    </head>

    <body>
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'north',split:true,border:false" style="height:50px;">
                <form id="searchForm">
                    <table>
                        <tr>
                            <td><a id="btn_add" class="easyui-linkbutton" data-options="group:'g1',iconCls:'icon-add'">添加</a></td>
				            <td><a id="btn_dele" class="easyui-linkbutton" data-options="group:'g1',iconCls:'icon-remove'">删除</a></td> 
                            
                        </tr>
                    </table>
                </form>
            </div>
            <div data-options="region:'center',border:false">
                <table id="grid">
                </table>
            </div>
            <div data-options="region:'east',split:true,border:false" style="width: 50%; padding: 5px;">
                <form id="form" name="form" method="post" class="form" enctype="multipart/form-data" action="${pageContext.request.contextPath}/addMovie.do">
                    <fieldset>
                        <legend> 基本信息--<span id="operateMode_title">添加模式</span> </legend>
	                    <input type="hidden" id="isDeleted" value="0" name="isDeleted" class="textbox" style="height: 22px;" />
                        <table class="table">
                            <tbody>
                                <tr>
                                    <th>ID</th>
                                    <td><input id="id" readonly="readonly" name="id" class="textbox"  value=0    style="height: 22px; background:#eee;width:50px;" /></td>
                                </tr>
                                <tr>
                                    <th>视频名称</th>
                                    <td>
                                    	<input id="movieName" name="movieName" class="textbox easyui-validatebox" required="true"    style="height: 22px;margin-top:10px;" />
                                    	<input id="movieUpLoad" type="file" name="file" style="display:none;" onchange="setMovieName()" />
                                    	<input id="change0" name="change0" value="-1" style="display:none">
                                    	<a onclick="uploaderFun();"id="openFile" class="easyui-linkbutton" style="margin-top:10px;">打开</a>
                                    	<!-- <a id="submitFile" class="easyui-linkbutton" data-options="iconCls:'icon-save'" style="margin-top:10px;">上传</a> -->
                                    	<div class="controls">  
					                        <div  class="progress progress-success progress-striped" style="width:50%;text-align:center;">  
					                            <div  id = 'proBar' class="bar progress-bar progress-bar-success" style="width:0%; text-align:center;line-height:20px;"></div>  
					                        </div>  
					                    </div>	
                                    </td>
                                </tr>
                                                                                                                                                                                                                                                                                                                                <tr>
                                    <th>视频路径</th>
                                    <td><input id="movieUrl"  name="movieUrl" class="textbox"   style="height: 22px; width:400px;" />(新建时路径可以不用添加)
                                    </td>
                                </tr>
                                <tr>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                	<th>序号</th>
                                	<td><input id="sortId" name="sortId"
                                            class="easyui-validatebox easyui-numberspinner"
                                            data-options="min:0,max:100,required:true" value="0"   style="width: 50px;" />
                                    </td>
                                </tr>  
								<tr>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <th>操作</th>
                               	 	<td><a id="operateMode_submit" class="easyui-linkbutton" data-options="iconCls:'icon-save'">确定</a> <a id="operateMode_reset" class="easyui-linkbutton" data-options="iconCls:'icon-reload'">重置</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </fieldset>
                </form>
            </div>
        </div>
        <script type="text/javascript">
        	var progressBar;
            $(function() {
                grid = $('#grid').datagrid({
                    fit: true,
                    border: false,
                    collapsible: false,
                    rownumbers: true,
                    pagination: true,
                    singleSelect: true,
                    rownumbers: true,
                    url:'${pageContext.request.contextPath }/listMovie.do',
                    columns: [
                        [{
                            field: 'id',
                            title: 'ID',
                            sortable:true
                        }, {
                            field: 'movieName',
                            title: '视频名称',
                            sortable:true
                        }, {
                            field: 'movieUrl',
                            title: '视频路径',
                            width:380,
                            sortable:true
                        }, {
                            field: 'sortId',
                            title: '序号',
                            sortable:true
                        }, {
                            field: 'createdTime',
                            title: '创建时间',
                            formatter: function(value, row, index){
		            			return value.substring(0,16);
		            		 },
                            sortable:true
                        }]
                    ],
                    onLoadSuccess: function(data) {
                        $('.iconImg').attr('src', fw.pixel_0);
                    },
                    onClickRow: function(index, row) {
                    	$("input[id^=change]").val(-1);
                    	$("#form").form("load", row);
                        $("#operateMode_title").html("修改模式");
                        //清空进度条数据
                        $('#proBar').empty();
                        $('#proBar').css('width','0%'); 
                    }
                });
                
                //添加操作
                $("#btn_add").click(function() {
                    $("#operateMode_title").html("添加模式");
                    $('#grid').datagrid("unselectAll");
                    $("#id").attr("value", 0);
                    $("#form").form("reset");
                  	//清空进度条数据
                    $('#proBar').empty();
                    $('#proBar').css('width','0%'); 
                })
            
                //删除操作
                $("#btn_dele").click(function() {
                    var rows = $('#grid').datagrid('getSelections');
                    if (rows <= 0) {
                        $.messager.show({
                            title : message.title.normal,
                            msg : message.grid_select,
                            timeout : message.timeout,
                            showType : message.showType
                        });
                    } else {
                        $.messager.confirm(message.title.askTitle, message.dele_comfirm, function(r) {
                            if (r) {
                                var idValue = $("#form input[name='id']").val();
                                $.post("${pageContext.request.contextPath }/delMovie.do", {
                                    id : idValue
                                }, function(result) {
                                    if (result.success) {
                                        $.messager.show({
                                            title : message.title.normal,
                                            msg : message.dele_success,
                                            timeout : message.timeout,
                                            showType : message.showType
                                        });
                                        grid.datagrid('reload');
                                    } else {
                                        $.messager.show({
                                            title : message.title.normal,
                                            msg : message.dele_fail,
                                            timeout : message.timeout,
                                            showType : message.showType
                                        });
                                    }
                                }, 'json');
                                $("#btn_add").click();
                            }
                        });
                    }
                })
                
                
                //确认提交操作
                $("#operateMode_submit").click(function() {
                    var idValue = $("#form input[name='id']").val();
                    if ($('#form').form('validate')) {
                        if (idValue > 0) {
                          	//修改
                          	progressBar = window.setInterval("getProgress()",500);
                       		$("#form").attr("action","${pageContext.request.contextPath}/updateMovie.do").ajaxSubmit(function(result) {
                           		result = JSON.parse(result);
                           		if(result.success){
                           			$.messager.show({
                                        title : message.title.normal,
                                        msg : message.update_success,
                                        timeout : message.timeout,
                                        showType : message.showType
                                    });
            					
                           			grid.datagrid("reload");
                                    //重新获取form信息内容
                                    $("#form").form("load", "${pageContext.request.contextPath }/getMovieById.do?id=" + idValue);
                                    $("input[id^=change]").val(-1);
                           		}else{
                                   	$.messager.show({
                                           title : message.title.normal,
                                           msg : message.update_fail,
                                           timeout : message.timeout,
                                           showType : message.showType
                                       });
                                   }
                           	});
                        } else {
                            if(idValue.trim().length == 0){
                                $.messager.show({
                                    title : message.title.normal,
                                    msg : message.add_button_click,
                                    timeout : message.timeout,
                                    showType : message.showType
                                });
                            }else{
                            	//$("#form").submit();
                            	//var progressBar = window.setInterval(getProgress,500);
                            	progressBar = window.setInterval("getProgress()",500);
                            	$("#form").attr("action","${pageContext.request.contextPath}/addMovie.do").ajaxSubmit(function(result) {
                            		result = JSON.parse(result);
                            		if(result.success){
                            			 $.messager.show({
                                             title : message.title.normal,
                                             msg : message.add_success,
                                             timeout : message.timeout,
                                             showType : message.showType
                                         });
                                         grid.datagrid("reload");
                                         $("#form").form("reset");
                            		}
                            		$("input[id^=change]").val(-1);
                            		/*var eventFun = function(){
                                        $.ajax({  
                                            type: 'post',  
                                            url: '${pageContext.request.contextPath }/processMovie.do',  
                                            data: {},  
                                            dataType: 'json',  
                                            success : function(data){
                                            		console.log(data);
                                                    $('#proBar').css('width',data.rate+''+'%');  
                                                    $('#proBar').empty();  
                                                    $('#proBar').append(data.show);   
                                                    if(data.rate == 100){  
                                                        window.clearInterval(intId);  
                                                    }     
                                    		}
                                         });
                                    }; 
                                    var intId = window.setInterval(eventFun,100); */ 
                            	});
                            	
                                //添加
                                /**$.post("${pageContext.request.contextPath }/addMovie.do", fw.serializeObject($('form')), function(result) {
                                    console.log(result);
                                	if (result.success) {
                                        $.messager.show({
                                            title : message.title.normal,
                                            msg : message.add_success,
                                            timeout : message.timeout,
                                            showType : message.showType
                                        });
                                        grid.datagrid("reload");
                                        $("#form").form("reset");
                                    }
                                     
                                }, 'json');**/
                            }
                        }
                    }
                })
                //重置操作
                $("#operateMode_reset").click(function() {
                    var idValue = $("#form input[name='id']").val();
                    if (idValue > 0) {
                        $("#form").form("load","${pageContext.request.contextPath }/getMovieById.do?id=" + idValue);
                    } else {
                        $("#form").form("reset");
                    }
                })
                
                //上传文件
                $("#submitFile").click(function(){
                	$("#moiveForm").submit();
                	var eventFun = function(){  
                        $.ajax({  
                            type: 'GET',  
                            url: '${pageContext.request.contextPath }/process.do',  
                            data: {},  
                            dataType: 'json',  
                            success : function(data){
                            		console.log(data.rate);
                                    $('#proBar').css('width',data.rate+''+'%');  
                                    $('#proBar').empty();  
                                    $('#proBar').append(data.show);   
                                    if(data.rate == 100){  
                                        window.clearInterval(intId);  
                                    }     
                    		}
                         });
                    };  
                    var intId = window.setInterval(eventFun,500);  
                });
            });

            $("#operateclass").click(function() {
				if( $("#agentId").val()>0 ){
					window.location.href="StatisticSchoolFinanceOrder.jsp?agentId="+$("#agentId").val();
				}else{
					$.messager.show({
						title : message.title.normal,
						msg : message.no_record,
						timeout : message.timeout,
						showType : message.showType
					});
				}
			});
            function uploaderFun() {
        	    /**var btn = $(this);
        	    var url = '../../uploader.jsp?moduleId=cook&funcId=';
        	    var dialog = fw.modalDialog({
        	        title: '选择文件',
        	        url: url,
        	        width: 700,
        	        height: 500,
        	        buttons: [{
        	            text: '确认选择',
        	            handler: function() {
        	                dialog.find('iframe').get(0).contentWindow.submitForm(dialog, btn);
        	            }
        	        }, {
        	            text: '关闭窗口',
        	            handler: function() {
        	                dialog.find('iframe').get(0).contentWindow.closeDialog(dialog);
        	                
        	            }
        	        }]
        	    });**/
        	    $("#movieUpLoad").trigger("click");
        	}
			
            function setMovieName(){
            	var movieName = $("#movieUpLoad").val();
            	movieName = movieName.substring(movieName.lastIndexOf("\\")+1);
            	$("#movieName").val(movieName);
            	$("#movieName").trigger("click");
            	var idValue = $("#form input[name='id']").val();
            	if(idValue>0){
            		//设置文件修改
                	$("#change0").val(1);
            	}
            }
            
            //获取进度条
        	function getProgress() {
  				$.ajax({
  					type : "post",
  					url : "${pageContext.request.contextPath}/ProgressServlet.do",
  					success : function(data) {
  						data = JSON.parse(data);
  						console.log(data.rate);
  						$('#proBar').css('width',data.rate+''+'%');  
                        $('#proBar').empty();  
                        $('#proBar').append(data.show);   
                        if(data.rate == 100){  
                            window.clearInterval(progressBar);  
                        }     
  					}
  					/*,error : function(err) {
  						document.getElementById('progressBarText').innerHTML = "Error retrieving progress";
  					}*/
  				});
        	}
        </script>
    </body>

    </html>